import React, {useEffect, useState} from 'react'
import { Button, Table, Modal, Spin } from 'antd'
import { connect } from 'umi'
import {getFundsBatchGroupList} from '../service'
import moment from 'moment';

const CreateTable = (props) => {

  const { onCancel, visible, current } = props;

  const [dataSource,setDataSource] = useState([]);
  const [loading,setLoading] = useState(false);


  useEffect(()=>{
    setLoading(true);
    if (current){
      getFundsBatchGroupList(current.id).then(res => {
        setDataSource(res);
        setLoading(false)
      })
    }
  },[current]);

  const onFormCancel = () => {
    setDataSource([]);
    onCancel()
  };

  const exportExcel = () => {
    let paramsStr = '';
    for (let i=0; i<current.length; i++){
      if (i===0){
        paramsStr += '?recordIds='+current[i].recordId;
      }else {
        paramsStr += '&recordIds='+current[i].recordId;
      }
    }
    window.open('/hr-ssc/api/api-admin/export/exportFundsRecord'+paramsStr);
  };

  const columns = [
    {
      title: '姓名',
      fixed: 'left',
      width: 100,
      align: 'center',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '参保地',
      width: 150,
      align: 'center',
      dataIndex: 'cityName',
    },
    {
      title: '参保单位',
      align: 'center',
      width: 200,
      dataIndex: 'unitName',
    },
    {
      title: '缴费时间',
      align: 'center',
      width: 120,
      dataIndex: 'operateTime',
      render: (text) => {
        return text!=='-'?moment(text).format('YYYY-MM'):''
      }
    },
    {
      title: '公积金',
      children: [
        {
          title: '基数',
          dataIndex: 'reservedFundsBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'reservedFundsPerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'reservedFundsPersonRate',
              hideInSearch: true,
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'reservedFundsOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'reservedFundsOrgRate',
              hideInSearch: true,
            },
          ]
        }
      ]
    },
    {
      title: '补充公积金',
      children: [
        {
          title: '基数',
          dataIndex: 'offerFundsBase',
          hideInSearch: true,
        },
        {
          title: '个人',
          children: [
            {
              title: '缴纳',
              dataIndex: 'offerFundsPerson',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'offerFundsPersonRate',
              hideInSearch: true,
            },
          ]
        },
        {
          title: '公司',
          children: [
            {
              title: '缴纳',
              dataIndex: 'offerFundsOrg',
              hideInSearch: true,
            },
            {
              title: '比例',
              dataIndex: 'offerFundsOrgRate',
              hideInSearch: true,
            },
          ]
        }
      ]
    },
    {
      title: '合计',
      fixed: 'right',
      width: 200,
      children: [
        {
          title: '个人',
          fixed: 'right',
          dataIndex: 'personCostTotal',
          hideInSearch: true,
          width: 100
        },
        {
          title: '公司',
          fixed: 'right',
          dataIndex: 'orgCostTotal',
          hideInSearch: true,
          width: 100
        },
      ]
    },
  ];


  return (
    <Modal
      width={'90%'}
      destroyOnClose
      title="汇缴明细"
      visible={visible}
      footer={<Button onClick={() => onFormCancel()}>关闭</Button>}
      onCancel={() => onFormCancel()}
    >
        <Table
          bordered
          loading={loading}
          pagination={false}
          rowKey="recordId"
          columns={columns}
          dataSource={dataSource}
          scroll={{y:500}}
        />
    </Modal>
  )
};


export default connect(({  }) => ({

}))(CreateTable)
